<!DOCTYPE html>
<html>
<head>
    <title>Deferred</title>
    <meta charset="utf-8"/>
    <script src="../../../js/jquery-1.10.1.min.js"></script>
    <script>

        function asyncEvent() {
            var dfd = jQuery.Deferred();

            // Resolve after a random interval
            setTimeout(function() {
                dfd.resolve( "hurray" );
            }, Math.floor( 400 + Math.random() * 2000 ) );

            // Reject after a random interval
            setTimeout(function() {
                dfd.reject( "sorry" );
            }, Math.floor( 400 + Math.random() * 2000 ) );

            // Show a "working..." message every half-second
            setTimeout(function working() {
                if ( dfd.state() === "pending" ) {
                    dfd.notify( "working... " );
                    setTimeout( working, 5000 );
                }
            }, 1 );

            // Return the Promise so caller can't change the Deferred
            return dfd.promise();
        }

        // Attach a done, fail, and progress handler for the asyncEvent
        $.when( asyncEvent() ).then(
                function( status ) {
                    alert( status + ", things are going well" );
                },
                function( status ) {
                    alert( status + ", you fail this time" );
                },
                function( status ) {
                    alert("status,statusstatus:" + status);
                    $( "body" ).append( status );
                }
        );

    </script>
</head>
<body>
    <p>Deferred--Deferred</p>
</body>
</html>